<template>
    <!-- 业务名片列表选择 -->
    <div id="bus-card-list-select">
        <top-nav :title="title"></top-nav>
        <bus-card-list-option :active="active" :option="option" @clickOption="clickOption"></bus-card-list-option>
        <bus-card-list-list 
        :height="height" 
        :option="option"
        :active="active"
        :actTempNo="actTemp.tplNo"
        @addOptList="addOptList"
        @setActTempImg="setActTempImg"
        ></bus-card-list-list>
        <!-- <bus-card-list-btn-menu :actTemp="actTemp"></bus-card-list-btn-menu> -->
    </div>
</template>

<script>
// 自定义组件
import TopNav from "_components/project/common/TopNav"
import busCardListList from "_components/project/BusCardListSelect/busCardListList"
import busCardListOption from "_components/project/BusCardListSelect/busCardListOption"
import busCardListBtnMenu from "_components/project/BusCardListSelect/busCardListBtnMenu"

// 自定义方法
import { checkDataEqualVal } from "_commonFn/check"
import { defaultShare } from "_commonFn/share"
import { getCookie } from '_commonFn/cookie'

export default {
    name: 'BusCardListSelect',
    data() {
        return {
            title: '选择名片模板',
            height: (window.innerHeight || document.documentElement.clientHeight) - 40 - 45,
            option: {
                man: {
                    id: 'man',
                    name: '男士',
                    list: [],
                },
                women: {
                    id: 'women',
                    name: '女士',
                    list: [],
                },
                all: {
                    id: 'all',
                    name: '通用',
                    list: [],
                },
            },
            active: getCookie('Sex') == 0 ? 'women' : 'man',
            actTemp: {
                createNo: '', // string	用户创建编号
                tplNo: '', // string	模板编号
                viewProject: '', // string	标准可显示项目,以,号相隔(1:我的位置，2:我的公司，3:我的介绍，4:我的供应，5:我的需求),例如：1,2,3
                defaultTxt: '', // string	自定义文本,以，号相隔
                tplName: '', // string	模板名称
                tplType: '', // int	模板类型(0:通用,1:男版,2:女版)
                setType: '', // int	设置模板类型(0:未知,1:标准,2：自定义)
                tplImgUrl: '', // string	模板请求地址
                customTxtItem: [],
            }
        }
    },
    methods: {
        clickOption(id) {
            const that = this
            Object.keys(that.option).forEach(item => {
                if (that.option[item].id === id) {
                    that.option[item].active = true
                    that.active = id
                } else {
                    that.option[item].active = false
                }
            })
        },
        // 添加全部模板、男士、女士模板数据
        addOptList(data) {
            const list = this.option[data.id].list
            const listData = data.list
            const that = this
            listData.forEach(item => {
                // if (item.TplDefault == 1) {
                //     that.setActTempImg({
                //         tplNo: item.TplNo, // string	模板编号
                //         tplType: item.TplType, // sstring	模板名称
                //         tplImgUrl: item.TplImgUrl, // sint	模板类型(0:通用,1:男版,2:女版)
                //     })
                // }
                list.push({
                    tplNo: item.TplNo, // string	模板编号
                    tplName: item.TplName, // sstring	模板名称
                    tplType: item.TplType, // sint	模板类型(0:通用,1:男版,2:女版)
                    tplDefault: item.TplDefault, // sint	是否是默认(0:否,1:是)
                    tplImgUrl: item.TplImgUrl, // sstring	模板请求地址
                    customTxtItem: item.CustomTxtItem, // Object	有数据返回为Json数组对象否则为null
                })
            })
        },
        setActTempImg(data, type) {
            console.log('setActTempImg data', data)
            this.actTemp.createNo = data.createNo || '' // string	用户创建编号
            this.actTemp.tplNo = data.tplNo || '' // string	模板编号
            this.actTemp.viewProject = data.viewProject || '' // string	标准可显示项目,以,号相隔(1:我的位置，2:我的公司，3:我的介绍，4:我的供应，5:我的需求),例如：1,2,3
            this.actTemp.tplName = data.tplName || '' // string	模板名称
            this.actTemp.tplType = data.tplType || '' // int	模板类型(0:通用,1:男版,2:女版)
            this.actTemp.setType = data.setType || '' // int	设置模板类型(0:未知,1:标准,2：自定义)
            this.actTemp.tplImgUrl = data.tplImgUrl || '' // string	模板请求地址
            this.actTemp.customTxtItem = data.customTxtItem || [] // string	模板请求地址
            if (type === 'click') {
                sessionStorage.setItem('WriteBusCardWriteData', JSON.stringify(this.actTemp))
                this.$router.push({
                    path: 'WriteBusCard',
                    name: 'WriteBusCard',
                    query: {
                        type: 'default',
                        no: this.actTemp.tplNo
                    }
                })
            }
            // const defaultTextArr = []
            // if (Array.isArray(data.customTxtItem) && data.customTxtItem.length > 0) {
            //     data.customTxtItem.forEach(item => { // Array
            //         if (item.CustomTxt) {
            //             defaultTextArr.push(item.CustomTxt)
            //         }
            //     })
            //     this.actTemp.defaultTxt = defaultTextArr.join(',')
            // } else {
            //     this.actTemp.defaultTxt = ''
            // }
            // console.log('this.actTemp.defaultTxt', this.actTemp.defaultTxt)
        },
    },
    activated() {
        const that = this
        if (that.$store.getters.isWechatBro) {
			checkDataEqualVal({
				data: that.$store.getters,
				key: 'getWechatStatus',
				val: ['success', 'fail'],
				callback(val) {
					if (val === 'success') {
                        defaultShare({})
                    }
				}
			})
        }
        // console.log(getCookie('Sex'))
        sessionStorage.removeItem('WriteBusCardWriteData')
    },
    components: {
        TopNav,
        busCardListList,
        busCardListBtnMenu,
        busCardListOption,
    }
}
</script>

<style lang="scss" scoped>

</style>